<template>
  <div>
    <van-nav-bar
      title="商品列表"
      left-text="返回"
      left-arrow
      :fixed="true"
      @click-left="$router.go(-1)"
    />
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="value in shoppImg" :key="value.src">
        <img :src="value.src" alt="" />
      </van-swipe-item>
    </van-swipe>
    <div class="main" v-for="value in shoppMain" :key="value.id">
      <div class="title">{{ value.title }}</div>
      <div class="content">
        <div class="money">
          市场价:<span>￥{{ value.market_price }}</span> 购物价：<span>{{
            value.sell_price
          }}</span>
        </div>
        <div class="total">
          <i>购买数量</i>
          <button @click="amount--" :disabled="amount == 1">-</button>
          <textarea v-model="amount"></textarea>
          <button @click="amount++">+</button>
        </div>

        <van-dialog v-model="show" title="请支付..." show-cancel-button>
          <img src="../assets/zhifu.png" alt="" style="width: 100%" />
        </van-dialog>

        <van-button type="info" @click="buy">立即购买</van-button>
        <van-button type="warning" class="add" @click="addShoppe(value)"
          >加入购物车</van-button
        >
      </div>
    </div>
    <div class="main" v-for="item in shoppMain" :key="item.title">
      <div class="parameter">产品参数</div>
      <div class="content">
        <p>商品货号：{{ item.goods_no }}</p>
        <p>库存情况：{{ item.stock_quantity }}</p>
        <p>上架时间：{{ item.add_time | mydate("-") }}</p>
      </div>

      <div class="main_btn" style="paddng: 0">
        <div>
          <van-button
            plain
            hairline
            type="primary"
            class="btn"
            @click="$router.push({ path: `/commodityInfo/${item.id}` })"
            >图文介绍</van-button
          >
        </div>
        <div>
          <van-button
            plain
            hairline
            type="info"
            class="btn"
            @click="$router.push({ path: `/commentList/${item.id}` })"
            >商品评论</van-button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { shoppingImg, shoppingGetinfo } from "../apis/get";

import { mydate } from "@/apis/dataFilter";
export default {
  data() {
    return {
      show: false,
      shoppImg: [],
      shoppMain: [],
      amount: 1,
      shopInfo: [],
    };
  },
  mounted() {
    shoppingGetinfo(this.$route.params.id).then((res) => {
      // console.log(res, "这里要给main赋数据");
      this.shoppMain = res.data.message;
    });
    shoppingImg(this.$route.params.id).then((res) => {
      this.shoppImg = res.data.message;
      // 获取小图存到本地存储带入给购物车
      this.shoppMain[0].img_url = this.shoppImg[0].src;
    });

    console.log(this.shoppMain);
  },
  methods: {
    addShoppe(val) {
      val.amount = this.amount;

      // ------设置加购后默认选中状态为true----
      val.checked = true;
      // ------设置加购后默认选中状态为true----end

      this.$toast.success("加购成功");
      //先把之前存好的数据拿出来再存储，不然会被覆盖
      this.shopInfo = JSON.parse(localStorage.getItem("shopInfo")) || [];

      //去重
      this.shopInfo.forEach((v, index) => {
        if (v.id == val.id) {
          this.shopInfo.splice(index, 1);
          val.amount = v.amount + (this.amount - 0);
        }
      });
      this.shopInfo.push(val);
      localStorage.setItem("shopInfo", JSON.stringify(this.shopInfo));
    },
    buy() {
      this.show = true;
    },
  },
  filters: {
    mydate,
  },
};
</script>

<style lang="less" scoped>
/deep/ .van-nav-bar__content {
  background-color: #26a2ff;

  .van-nav-bar__text,
  .van-icon {
    color: #fff;
  }
}
/deep/ .van-nav-bar__title {
  color: #fff;
}
.my-swipe .van-swipe-item {
  margin-top: 40px;
  height: 300px;
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  box-shadow: 0 0 4px 2px rgba(196, 196, 196, 0.349);
}
.main {
  padding: 20px 20px;
  box-shadow: 0 0 4px 2px rgba(207, 207, 207, 0.541);
  border-radius: 5px;
  margin: 10px 0;
  .title {
    font-size: 20px;
    font-weight: 700;
    line-height: 40px;
    padding: 10px 0;
    border-bottom: 1px solid #333;

    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    word-wrap: break-word;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .money {
    padding: 20px 0;
    span {
      &:first-child {
        margin-right: 40px;
        text-decoration: line-through;
      }
      &:last-child {
        color: red;
        font-size: 22px;
      }
    }
  }
  .total {
    height: 60px;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    i {
      font-style: normal;
      margin-right: 90px;
    }
    button {
      width: 30px;
      height: 30px;
      text-align: center;
      border: 1px solid #999;
      border-radius: 2px;
      line-height: 30px;
    }
    textarea {
      width: 40px;
      height: 30px;
      margin: 0 2px;
      text-align: center;
      line-height: 30px;
    }
  }
  .add {
    margin-left: 20px;
  }
  .parameter {
    height: 40px;
    line-height: 40px;
    font-style: 16px;
    border-bottom: 1px solid #999;
  }
  .content {
    p {
      margin: 10px 40px 5px 0;
    }
  }

  .main_btn {
    margin-top: 30px;
    .btn {
      width: 100%;
      margin-bottom: 20px;
    }
  }
}
</style>